import React,{Component} from 'react';
import {connect} from 'react-redux';
import {getNews,lookCmt} from './../action/news';
import NavLink from './NavLink.js';
import {Moment}  from 'moment';

  /*  class News extends Component{
        render(){
            var style={
                newsHeader:{
                    marginTop:"100px"
                }
            }
            return (
                <div style={style.newsHeader}>
                    News
                </div>
            )
        }
    
    }
    export default News;*/
    
    class NewsContext extends Component{
        
        componentWillMount(){
            this.props.getNews();
        }
    
        changePage(e){
            var page=e.currentTarget.getAttribute('data-page');
            var params= {page:parseInt(page)};
            this.props.getNews(params);
        }
    
        render(){
            const {lists} = this.props;
            if(!lists.rows){
                return <li>数据加载中...</li>
            }
    
            var output= [];
            var pages = 1;
            var outputPages=[];
    
            pages=Math.ceil(lists.total/lists.limit);
            for(let i=1;i<=pages;i++){
                outputPages.push(
                    <li key={i} >
                        <a href="javascript:void(0)" data-page={i} onClick={(e)=>this.changePage(e)}>{i}
                            <span className="sr-only"></span>
                        </a>
                    </li>
                )
            }
    
            var ls=lists.rows;
            for(var i=0;i<lists.rows.length;i++){
                output.push(
                    <div className="jumbotron"  key={i}>
                        <h2>{ls[i].title}</h2>
                        <p>{ls[i].btitle}</p>
                        <p></p>
                        <p>{ls[i].content}</p>
                        <p></p>
                        <p>作者：{ls[i].author}</p>
                        <p>时间：{ls[i].date}</p>
                        <p>时间：{Moment}</p>
                        <p>
                        <NavLink className="btn btn-primary" style={{background:'Dackblue'}} to={'/comment/'+ls[i]._id}  
                            role="button" >查看评论</NavLink>&nbsp;
                        </p>
                    </div>  
                )
            }
    
            return(
                <div>
                    <div className="col-xs-12 col-sm-12">
                        <p className="pull-right visible-xs">
                            <button type="button" className="btn btn-default btn-xs" data-toggle="offcanvas" >Toggle nav</button>
                        </p>
                        <div className="panel panel-primary">
                            <div className="panel-heading" style={{background:'Dackblue'}}>中国新闻</div>
                            <div className="panel-body">
                                <nav aria-label="..."><ul className="pagination">{outputPages}</ul></nav>
                                    {output}
                                <br/>
                                <nav aria-label="..."><ul className="pagination">{outputPages}</ul></nav>
                            </div>
                        </div>
                    </div>
 
                </div>
            )
        }
    }
    
    const getValue = (state)=>{
        return {
            lists:state.news.news
        }
    }
    
    const News = connect(getValue,{getNews})(NewsContext);
    
    export default News;